<template>
  <div class="content">
    <h1 style="text-align: center;">问诊历史</h1>
    <a href="" class="historylistbox" v-for="(item, key) in historylist" :key="key" @click.prevent="router.push({path: '/doctor_query', 
        query: {id: item.doctor, name: item.doctor_name, department: item.doctor_department}})">
      <div class="doctor_name">问诊医生：{{ item.doctor_name }}</div>
      <div class="create_time">首次问诊：{{ item.create_time }}</div>
      <div class="update_time">最后问诊：{{ item.update_time }}</div>
      <div class="department">部门：{{ item.doctor_department }}</div>
      <div class="hospital">医院：{{ item.doctor_hospital }}</div>
      <img class="avatar" :src="item.doctor_avatar" style="border-radius: 50%;">
      <el-button type="primary" class="button" @click="router.push({path: '/doctor_query', 
        query: {id: item.doctor, name: item.doctor_name, department: item.doctor_department}})">
        继续询问
      </el-button>
    </a>
  </div>
</template>

<style scoped>
  html, body {
    margin: 0;
    padding: 0;
  }
  .content{
    position: relative;
    width: 800px;
    height: 800px;
    margin: 0 auto;
    background-color: #10d3ff;
    display: flex;
    flex-direction: column;
    /* overflow-y: scroll; */
  }
  .historylistbox{
    position: relative;
    width: 800px;
    height: 200px;
    border: 1px solid #000;
    text-decoration: none;
  }
  .doctor_name{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 150px;
  }
  .avatar{
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100px;
    height: 100px;
  }
  .create_time{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 70px;
    left: 150px;
  }
  .update_time{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 120px;
    left: 150px;
  }
  .department{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 340px;
  }
  .hospital{
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    left: 540px;
  }
  .button{
    position: absolute;
    top: 130px;
    left: 600px;
  }
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let historylist = ref([])

  const gethistorylist = () =>{
    axios.get(`http://127.0.0.1:8000/user/history/`, {
      headers: {
        Authorization: "Bearer " + localStorage.getItem("access_token")
      }
    })
    .then(res=>{
      console.log(res)
      historylist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    }
    )
  }

  onMounted(()=>{
    gethistorylist()
  })

</script>
